<template>
  <view class="page">
    <!-- 地址 start -->
    <view class="address" @click="chooseAddress">
      <image class="head" v-if="addressData" :src="imgWechatUrl+'/activity/address.png'" mode=""></image>
      <!-- 没有头像时 做占位符 -->
      <image class="head" v-else :src="imgWechatUrl+'/activity/address.png'" mode=""></image>
      <view class="address-box">
        <view class="p1" v-if="addressData">
          <view class="label" v-if='addressData.label_name'>{{addressData.label_name}}</view>
          <view class="text1">{{ addressData.name }}</view>
          <view class="text2">{{ addressData && addressData.mobile | filterMobile }}</view>
        </view>
        <view class="p2" v-if="addressData">{{ addressData.province }}{{ addressData.city }}{{ addressData.district }}{{ addressData.address }}</view>
        <view class="no-address" v-if="!addressData">{{i18n['您还没有收货地址,去添加']}}</view>
      </view>
      <image class="to-icon" :src="imgWechatUrl+'/activity/arrow-right.png'" mode=""></image>
    </view>
    <!-- 地址 end -->
    <!-- 商品信息 -->
    <view class="goods-info">
      <view class="goods-box">
        <view class="good-item" v-for="(item, index) in goods" :key="index">
          <view class="img-box">
			  <view class="img">
				  <fu-image :src="item.thumb" mode="widthFix"></fu-image>
			  </view>
          </view>
          <view class="right-info">
            <view class="title text-cut-2">{{ item.name }}</view>
            <view class="sku">{{ item.key_name || '' }}</view>
            <view class="price-box">
              <view class="price">
                <text class="small">￥</text>
                {{item.price || item.shop_price}}
              </view>
              <view class="num">x{{ item.number }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="info-box">
        <view class="info-item">
          <view class="item-left">
            <view class="text">{{i18n['商品总额']}}</view>
          </view>
          <view class="item-right">
            <text>
              <text class="text-price">{{ goods_price }}</text>
            </text>
          </view>
        </view>
        <view class="info-item">
          <view class="item-left">
            <view class="text">{{i18n['发票']}}</view>
          </view>
          <view @tap="openInvoice" class="item-right">
            <view class="coupon-text" v-if="isInvoice == 2">{{i18n['不开发票']}}</view>
            <view class="coupon-text" v-else>{{invoice.invoice_type == 1 ? i18n['个人发票'] : i18n['企业发票']}}</view>
            <image class="icon" :src="imgWechatUrl+'/activity/arrow-right.png'" mode=""></image>
          </view>
        </view>
        <view @tap="showFreight = true" class="info-item">
          <view class="item-left">
            <view class="text">{{i18n['运费']}}</view>
            <view v-if="goods.length == 1" class="text2">{{goods[0].freight_name}}</view>
          </view>
          <view class="item-right" v-if='express_price || !express_price'>{{!express_price ? i18n['免运费'] : `￥${express_price}`}}</view>
        </view>
        <view class="info-item">
          <view class="item-left item-left-ipt">
            <view class="text">{{i18n['留言']}}</view>
            <input class="ipt" type="text" v-model="remark" maxlength="60" :placeholder="i18n['建议留言前先与商家沟通确认']" />
          </view>
          <view class="item-right"></view>
        </view>
        <view class="info-footer">
          <text class="text1">{{i18n['共']}}{{goods.length}}{{i18n['件']}} {{i18n['合计']}}:</text>
          <text class="text2">
            <text class="text-bold text-df text-price"></text>
            <text class="text-bold ">{{ goods_price }}</text>
          </text>
        </view>
      </view>
    </view>
    <!-- 商品信息 end -->
    <!-- 底部总计和按钮 -->
    <view class="footer-box">
      <view class="left">
        <text class="text1">{{i18n['总计']}}：</text>
        <text class="text2">
          <text class="text-bold text-df text-price"></text>
          <text class="text-bold ">{{ goods_price }}</text>
        </text>
      </view>
      <view class="right" @click="beforeSubmit">{{i18n['提交订单']}}</view>
    </view>
    <!-- 底部总计和按钮 end -->
    <!-- 运费弹窗 start -->
    <fu-popup v-model="showFreight" mode="bottom" z-index="100" :safe-area-inset-bottom="true" :border-radius="24" ref="popupInvoice"
      @close="closeshowDrawer">
      <view class="freight-popup-content">
        <view class="top-box flex justify-center align-center">
          <image class="icon-title" :src="imgWechatUrl+'/activity/pop-title-left.png'" mode=""></image>
          <view class="title">{{i18n['运费说明']}}</view>
          <image class="icon-title" :src="imgWechatUrl+'/activity/pop-title-right.png'" mode=""></image>
          <image @tap="showFreight = false" class="icon-close" :src="imgWechatUrl+'/activity/close-pop.png'" mode=""></image>
        </view>
        <view v-if="goods&&goods[0]&&goods[0].freight_explain" class="freight-text" v-html='goods[0].freight_explain.replace(/\n/g, "<br/>")'>
        </view>
        <view v-else class="freight-text">
          {{i18n['无']}}
        </view>
        <view @tap="showFreight = false" class="freight-btn">
          {{i18n['确定']}}
        </view>
      </view>
    </fu-popup>
    <!-- 运费弹窗 end -->
    <!-- 优惠券弹窗 start -->
    <fu-popup v-model="showCoupon" mode="bottom" z-index="100" :safe-area-inset-bottom="true" :border-radius="24" ref="popupInvoice"
      @close="closeshowDrawer">
      <view class="coupon-popup-content">
        <view class="top-box flex justify-center align-center">
          <image class="icon-title" :src="imgWechatUrl+'/activity/pop-title-left.png'" mode=""></image>
          <view class="title">{{i18n['选择优惠券']}}</view>
          <image class="icon-title" :src="imgWechatUrl+'/activity/pop-title-right.png'" mode=""></image>
          <image @tap="showCoupon = false" class="icon-close" :src="imgWechatUrl+'/activity/close-pop.png'" mode=""></image>
        </view>
        <checkbox-group v-if="coupon_list.length > 0">
          <block v-for="(item, index) in coupon_list" :key="item.id">
            <label @click="choose(item, index)">
              <view class="flex padding-lr margin-tb-sm height-150 wrap">
                <view class="coupon-wrap flex-sub margin-left-sm bg-white radius list-item flex align-center padding-lr">
                  <view class="left flex flex-direction color-white radius">
                    <text class="text-price">{{ item.money }}</text>
                    <text class="text-sm" v-if="item.type == 1">{{i18n['使用限制']}}：{{i18n['无限制']}}</text>
                    <text class="text-cut text-sm" v-else>{{i18n['满']}}{{ item.min_order_money }}{{i18n['元']}}{{i18n['使用']}}</text>
                  </view>
                  <view class="right flex-sub flex">
                    <view class="flex-sub padding-left flex flex-direction justify-around margin-left">
                      <view class="flex align-center justify-between ">
                        <text class="text-sm text-333 text-cut coupon-title ">{{ item.name }}</text>
                        <view class="flex align-center justify-center">
                          <checkbox class="round scale" style="transform:scale(0.7)" :class="item.checked ? 'checked' : ''"
                            :checked="item.checked ? true : false" :value="item.id + ''"></checkbox>
                        </view>
                      </view>
                      <!-- <text class="coupon-intro">全场可用</text> -->
                      <text class="text-cut text-sm text-999 margin-top-xs">{{i18n['有效期至']}}：{{ item.end_time }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </label>
          </block>
        </checkbox-group>
        <!-- 无数据 start -->
        <view class="kong flex flex-direction justify-center align-center" v-else>
          <fu-empty-ui :pagingListNoListDataText="i18n['暂无可用优惠券']"></fu-empty-ui>
        </view>
        <!-- 底部 start -->
        <view @tap="showCoupon = false" class="bottom-btn">
          {{i18n['确定']}}
        </view>
        <!-- 底部 end -->
      </view>
      <!-- 无数据 end -->
    </fu-popup>
    <!-- 优惠券弹窗 end -->
    <!-- 发票弹窗 start -->
    <fu-popup v-model="show" mode="bottom" z-index="100" :safe-area-inset-bottom="true" :border-radius="24" ref="popupInvoice"
      @close="closeshowDrawer">
      <view class="invoice-popup-content">
        <view class="flex justify-between padding-bottom padding">
          <view class="flex-sub text-center">{{i18n['发票']}}</view>
          <view class="close-box" @tap="show = false">
            <text class="cuIcon-close"></text>
          </view>
        </view>
        <view class="flex justify-between padding-left-sm padding-right-sm margin-top-sm">
          <view class="text-333">{{i18n['发票']}}</view>
          <view>
            <radio-group @change="radioChange" class="flex justify-end align-center">
              <radio class="margin-left-sm switchScale" :color="colorTheme" :class="isOpen == 1 ? 'checked' : ''" :checked="isOpen == '1' ? true : false"
                value="1" style="transform: scale(0.7);">
              </radio>
              <view>{{i18n['开票']}}</view>
              <radio class="margin-left-sm switchScale" :color="colorTheme" :class="isOpen == 2 ? 'checked' : ''" :checked="isOpen == '2' ? true : false"
                value="2" style="transform: scale(0.7);">
              </radio>
              <view>{{i18n['不开发票']}}</view>
            </radio-group>
          </view>
        </view>
        <!-- 发票组件 start -->
        <fu-invoice :type="1" @change="getInvoice" :invoiceData="invoice" v-if="isOpen == 1"></fu-invoice>
        <!-- 发票组件 end -->
      </view>
    </fu-popup>
    <!-- 发票弹窗 end -->
  </view>
</template>

<script>
  import fuInvoice from '../../components/fu-invoice/fu-invoice.vue';
  export default {
    components: {
      fuInvoice,
    },
    data() {
      return {
				imgWechatUrl:this.imgWechatUrl,
        goods: [], //商品信息
        addressData: null, //地址信息
        goods_price: 0, //商品价格
        express_price: 0, //是否存在运费价格
        payable_money: 0, //实付金额
        remark: '', //留言
        order: {}, //订单信息
        coupon: null, //优惠券信息
        use_not_coupon: 1, // 1未使用优惠券 0 使用了优惠券
        coupon_id: 0, //优惠券id
        curIndex: -1, //当前选中优惠券下标  默认不选中
        coupon_list: [], //优惠券列表
        cartData: null, //购物车信息
        shipping_coupon: null, //购物车优惠券信息
        order_type: 3, //订单类型 7预售
        agreePayDeposit: false, //预售不退款协议是否同意  默认不同意
        deposit: 0, //预售定金
        balance: 0, //预售尾款
        presell_etime: '', //预售支付尾款最后时间
        presell_stime: '', //预售支付尾款开始时间
        isOpen: 1, //打开发票弹窗选择开不开发票
        isInvoice: 2, //默认不开发票
        show: false, //发票开启弹窗
        showFreight: false, //运费开启弹窗
        showCoupon: false, // 优惠券开启弹窗
        invoice: {
          //填写的发票信息
          invoice_type: 1, //1个人，2企业
          invoice_title: '', //发票抬头
          invoice_company_duty_paragraph: '', //税号
          invoice_company_bank: '', //开户银行
          invoice_company_bank_num: '', //银行账号
          invoice_company_address: '', //企业地址
          invoice_company_phone: '', //企业电话
          invoice_mobile: '', //联系方式
          invoice_email: '', //电子邮件
        },
        requestData: null,
      };
    },
    filters: {
      /**
       * @description 手机号过滤中间四位用*代替
       * @param {Number,String} val 手机号
       */
      filterMobile(val) {
        if (!val) return '';
        return val.substr(0, 3) + '****' + val.substr(-4);
      }
    },
    onLoad(options) {
      this.setNavigationBarTitle(this.i18n['确认订单'])
      console.log('create order options', options);
      const {goods_id,number,sku_ids,address_id} = options;
      if(sku_ids){
        this.requestData = {
          goods_id: goods_id,
          sku_ids: sku_ids,
        }
      }else{
        this.requestData = {
          goods_id: goods_id,
          number: number,
        }
      }
      if(address_id){
        this.addressData = {
          address_id: address_id
        };
      }
      this.get_one_order_info();
      // 接收选择地址信息
      uni.$on('select_address', data => {
        console.log('select_address', data);
        this.addressData = data;
        if (this.cartData) {
          this.get_cart_order_info();
        } else {
          this.get_one_order_info();
        }
      });
      // 接收选择发票信息
      uni.$on('select_invoice', data => {
        console.log("data: ", data);
        if (data) {
          this.invoice = data;
          if (data.invoice_title) {
            this.isInvoice = 1;
          } else {
            this.isInvoice = 2;
          }
        } else {
          this.isInvoice = 2;
        }
      });
    },
    onUnload() {
      // 关闭监听
      uni.$off('select_address');
      uni.$off('select_coupon');
      uni.$off('select_invoice');
    },
    computed: {
      // 选择下标后返回选中优惠券数据
      curCoupon() {
        if (this.curIndex == -1) return null;
        return this.coupon_list[this.curIndex];
      }
    },
    methods: {
      /**
       * @description 获取优惠券列表数据
       */
      getCouponList() {
        this.showCoupon = true;
        let cid = this.goods.map(item => item.cid);
        cid = [...new Set(cid)].join(',');
        let all_money = {};
        this.goods.forEach((item, index) => {
          let price = item.shop_price;
          all_money[item.id] = {
            price: price * item.number,
            cid: item.cid
          };
        });
        this.$api
          .post(global.apiUrls.postOrderCanUseCoupon, {
            money: this.goods_price,
            category_id: cid,
            all_money: JSON.stringify(all_money)
          })
          .then(res => {
            // this.isShowLoading = false;
            // uni.stopPullDownRefresh();
            console.log('可用优惠券列表: ', res);
            if (res.data.code == 1) {
              this.coupon_list = res.data.data;
              // 初始化默认选中的优惠券
              this.initSelected();
            }
          })
          .catch(err => {
            this.isShowLoading = false;
            console.log(err);
            uni.stopPullDownRefresh();
          });
      },
      /**
       * @description 初始化默认选中的优惠券
       */
      initSelected() {
        // 如果没有优惠券id传入  默认就没有选中优惠券
        if (!this.coupon_id) return;
        this.coupon_list.forEach((item, index) => {
          if (item.id == this.coupon_id) {
            item.checked = true;
            this.curIndex = index;
          } else {
            item.checked = false;
          }
        });
      },
      /**
       * @description 切换选中
       * @param {Object} item 选中数据
       * @param {Number} idx 选中下标
       */
      choose(item, idx) {
        console.log(item, idx)
        if (item.checked) {
          item.checked = false;
          this.curIndex = -1;
        } else {
          item.checked = true;
          this.curIndex = idx;
        }
        this.coupon_list.forEach((ele, index) => {
          if (index !== idx) {
            ele.checked = false;
          }
        });
        console.log("this.curIndex: ", this.curIndex);
        if (this.curIndex == -1) {
          this.use_not_coupon = 1;
          this.coupon_id = 0;
        } else {
          this.use_not_coupon = 0;
          this.coupon_id = this.coupon_list[this.curIndex].id;
        }
        if (this.cartData) {
          this.get_cart_order_info();
        } else {
          this.get_one_order_info();
        }
        console.log("this.curIndex: ", this.curIndex, this.coupon_id);
      },
      /**
       * @description 获取发票信息
       * @param {Object} data 入参 填写的发票信息
       */
      getInvoice(data) {
        this.invoice = data;
        this.show = false;
        // 关闭发票弹窗时判断 若选择了开发票且发票信息填写了则是开发票  否者是不开发票
        if (data.invoice_title && this.isOpen == 1) {
          this.isInvoice = 1;
        } else {
          this.isInvoice = 2;
        }
      },
      /**
       * @description 获取发票信息
       * @param {Object} e 入参 e.detail.value 1开票 2不开票
       */
      radioChange(e) {
        this.isOpen = e.detail.value;
        if (e.detail.value == 2) {
          this.show = false;
        }
      },
      /**
       * @description 打开发票弹框
       */
      openInvoice() {
        this.isOpen = 1
        this.show = true;
      },
      /**
       * @description 关闭发票弹窗
       */
      closeshowDrawer() {
        this.show = false;
        // 关闭发票弹窗时判断 若选择了开发票且发票信息填写了则是开发票  否者是不开发票
        if (this.invoice.invoice_title && this.isOpen == 1) {
          this.isInvoice = 1;
        } else {
          this.isInvoice = 2;
        }
      },
      /**
       * @description 是否同意预售金额不支持退款
       */
      changeAgreePayDeposit() {
        this.agreePayDeposit = !this.agreePayDeposit;
      },
      /**
       * @description 非购物车页面进来获取订单详情
       */
      get_one_order_info() {
        let data = JSON.parse(JSON.stringify(this.requestData));
        if(this.coupon_id){
          data.coupon_id = this.coupon_id
        }
        if(this.addressData && this.addressData.address_id){
          data.address_id = this.addressData && this.addressData.address_id;
        }
        if (this.use_not_coupon == 1) {
          data.use_not_coupon = 1;
        }
        console.log('请求参数',data);
        this.$api.post(global.apiUrls.postWholesaleOrderInfo, data).then(res => {
          console.log('buynow order', res.data);
          if (res.data.code == 1) {
            let data = res.data.data;
            if (data.address && !Array.isArray(data.address)) {
              this.addressData = data.address;
            }
            this.goods = data.goods;
            this.coupon = data.coupon ? data.coupon : null;
            if (data.coupon) {
              this.coupon_id = data.coupon.id;
            }
            this.integral_reduce = {
              is_integral_reduce: data.is_integral_reduce,
              reduce_money: data.reduce_money,
              integral_reduce: data.integral_reduce,
              score: data.score,
              integral_payable_money: data.integral_payable_money
            };
            this.is_pure_integral = data.is_pure_integral;

            this.sales_integral = data.sales_integral;
            this.deposit = data.deposit;
            this.balance = data.balance;
            this.presell_etime = data.presell_etime;
            this.presell_stime = data.presell_stime;
            this.goods_price = data.goods_price;
            this.express_price = data.express_price;
            this.payable_money = data.payable_money;
            if (data.order_type) {
              this.order_type = data.order_type;
            }
            if (data.shipping_coupon) {
              this.shipping_coupon = data.shipping_coupon;
            }
          } else {
            this.$message.info(res.data.msg);
            setTimeout(function() {
              uni.navigateBack();
            }, 800);
          }
          uni.stopPullDownRefresh();
        });
      },
      /**
       * @description 购物车过来获取订单详情
       */
      get_cart_order_info() {
        let data = {
          cart_ids: this.cartData.ids,
          coupon_id: this.coupon_id || '0',
          address_id: (this.addressData && this.addressData.address_id) || 0
        };
        if (this.use_not_coupon == 1) {
          data.use_not_coupon = 1;
        }
        this.$api
          .post(global.apiUrls.postCartOrderInfo, data)
          .then(res => {
            console.log('购物车订单信息: ', res);
            if (res.data.code == 1) {
              let data = res.data.data;
              this.goods = data.goods;
              if (data.address && !Array.isArray(data.address)) {
                this.addressData = data.address;
              }
              this.coupon = res.data.data.coupon ? res.data.data.coupon : null;
              if (res.data.data.coupon) {
                this.coupon_id = res.data.data.coupon.id;
              }
              this.goods_price = res.data.data.order_money;
              this.express_price = res.data.data.express_price;
              this.payable_money = res.data.data.payable_money;
              if (res.data.data.shipping_coupon) {
                this.shipping_coupon = res.data.data.shipping_coupon;
              }
            } else {
              this.$message.info(res.data.msg);
              setTimeout(() => {
                uni.navigateBack();
              }, 800);
            }
            uni.stopPullDownRefresh();
          })
          .catch(err => {
            console.log('err: ' + JSON.stringify(err));
          });
      },
      /**
       * @description 选择地址
       */
      chooseAddress() {
        this.$urouter.navigateTo({
          url: '/pages/address/address-list/index',
          params: {
            type: 1,
            id: (this.addressData && this.addressData.address_id) || 0
          }
        });
      },
      /**
       * @description 去选择优惠券
       */
      chooseCoupon() {
        let cid = this.goods.map(item => item.cid);
        cid = [...new Set(cid)].join(',');
        let all_money = {};
        this.goods.forEach((item, index) => {
          let price = item.shop_price;
          all_money[item.id] = {
            price: price * item.number,
            cid: item.cid
          };
        });
        let data = {
          order_price: this.goods_price,
          coupon_id: this.coupon_id,
          cid: cid,
          all_money: JSON.stringify(all_money)
        };
        this.$urouter.navigateTo({
          url: '/pages/order/order-process/choos_coupon/index',
          params: data
        });
      },
      /**
       * @description 关闭积分使用规格
       */
      handleClose() {
        this.integralModel = false;
      },
      /**
       * @description 打开积分使用规格
       */
      selectUseIntegral() {
        const that = this;
        if (this.integral_reduce.is_integral_reduce == 1) {
          that.$refs['integral'].open();
        }
      },
      /**
       * @description 积分抵扣
       * @param {Boolen} isSelect 是否选择了积分抵扣
       */
      hanldeSelect(isSelect) {
        this.integral_reduce.isSelect = isSelect;
        console.log(isSelect, this.i18n['是否选择积分抵扣'], this.integral_reduce);
        this.$forceUpdate();
      },
      /**
       * @description 提交订单之前验证
       */
      beforeSubmit() {
        // 地址是否存在
        if (!this.addressData) return this.$message.info(this.i18n['请选择可用收货地址']);
        this.$util.throttle(()=>{
					this.handleSubmit()
				}, 2000, true);
      },
      /**
       * @description 确认订单 下单
       */
      handleSubmit() {
        const that = this;
        var order_info = {};
        order_info.address = this.addressData;
        order_info.goods = this.goods;
        order_info.express_price = this.express_price;
        order_info.remark = this.remark;
        // 判断是否开发票  选择开具发票但是不填写信息 也不开发票
        if (this.isInvoice == 1) {
          order_info.invoice = this.invoice;
        }
        // 活动id
        if (this.order.activity_id != 0) {
          order_info.activity_id = this.order.activity_id;
        }
        var postdata = {
          isSelect_integral_reduce: this.integral_reduce.isSelect ? 1 : 0,
          order_type: this.order_type,
          order_money: this.goods_price,
          payable_money: this.goods_price,
          coupon_id: this.coupon && this.coupon.id ? this.coupon.id : 0,
          order_info: JSON.stringify(order_info),
          is_wholesale: 1,
        };

        console.log("postdata", postdata);
        this.$api.post(global.apiUrls.postCreateOrder, postdata).then(res => {
          if (res.data.code == 1) {
            this.$message.info(this.i18n['订单提交成功，请支付…']);
            if (this.cartData) {
              uni.$emit('delCartGoods', this.cartData.ids);
            }

            this.$api
              .get(global.apiUrls.getOrderDetail, {
                order_sn: res.data.data.order_sn,
                order_type: this.order_type
              })
              .then(response => {
                if (response.data.data.pay_status == 1) {
                  if (that.integral_reduce.isSelect) {
                    //跳转到支付成功
                    setTimeout(() => {
                      uni.redirectTo({
                        url: '/pages/order/order-process/pay-success/index',
                        params: {
                          order_sn: res.data.data.order_sn,
                          order_type: that.order_type
                        }
                      });
                    }, 500);
                  } else {
                    //跳转到积分成功
                    setTimeout(() => {
                      uni.redirectTo({
                        url: '/pages/integral/integralgoods/exchange-success/index'
                      });
                    }, 500);
                  }
                } else {
                  setTimeout(() => {
                    this.$urouter.redirectTo({
                      url: '/pages/order/order-process/pay-order/index',
                      params: {
                        order_sn: res.data.data.order_sn,
                        order_type: this.order_type
                      }
                    });
                  }, 500);
                }
              });
          } else {
            this.$message.info(res.data.msg);
          }
        });
      },
    },
    onPullDownRefresh() {
      if (this.cartData) {
        this.get_cart_order_info();
      } else {
        this.get_one_order_info();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    padding-bottom: 10rpx;
  }

  // 地址
  .address {
    margin: 24rpx auto 0;
    width: 702rpx;
    height: 221rpx;
    opacity: 1;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff url() -7px bottom repeat-x;
    background-size: 90rpx 6rpx;

    .head {
      margin-left: 24rpx;
      display: block;
      width: 60rpx;
      height: 60rpx;
      flex-shrink: 0;
      border-radius: 50%;
    }

    .address-box {
      height: 221rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 498rpx;
      flex-shrink: 0;

      .p1 {
        display: flex;
        align-items: center;

        .label {
          /* width: 56rpx; */
          padding: 0 10rpx;
          // height: 32rpx;
          background: rgba(105, 139, 255, 0.08);
          border: 1px solid #698bff;
          opacity: 1;
          border-radius: 8rpx;
          text-align: center;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 32rpx;
          color: #698bff;
          opacity: 1;
        }

        .text1 {
          margin-left: 16rpx;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 34rpx;
          color: #333333;
          opacity: 1;
        }

        .text2 {
          margin-left: 32rpx;
          font-size: 32rpx;
          font-family: Lato;
          font-weight: 500;
          line-height: 34rpx;
          color: #333333;
          opacity: 1;
        }
      }

      .p2 {
        margin-top: 16rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        color: #666666;
        opacity: 1;
        //两行溢出隐藏
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .no-address {
        color: #999;
        font-size: 24rpx;
      }
    }

    .to-icon {
      margin-right: 40rpx;
      display: block;
      width: 12rpx;
      height: 22rpx;
      flex-shrink: 0;
    }
  }

  // 商品信息
  .goods-info {
    margin: 20rpx auto 122rpx;
    width: 702rpx;
    overflow: hidden;
    background: #ffffff;
    opacity: 1;
    border-radius: 16rpx;

    .goods-box {
      position: relative;
      width: 654rpx;
      margin: 0 auto;
      overflow: hidden;
      border-bottom: 1px solid #eeeeee;
      opacity: 1;
      padding-bottom: 32rpx;
      height: auto;

      .good-item {
        width: 654rpx;
        height: 200rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 32rpx;

        .img-box {
          width: 200rpx;
          height: 200rpx;
          flex-shrink: 0;
          position: relative;
          border-radius: 16rpx;
          overflow: hidden;

          .img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 200rpx;
          }
        }

        .right-info {
          width: 430rpx;
          height: 200rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 42rpx;
            color: #333333;
            opacity: 1;
            //两行溢出隐藏
            white-space: normal;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .sku {
            // margin-top: 8rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 33rpx;
            color: #999999;
            opacity: 1;
            //单行溢出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
          }

          .price-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
              font-size: 32rpx;
              font-family: Oswald;
              font-weight: 500;
              line-height: 36rpx;
              color: $theme;
              opacity: 1;

              .small {
                font-size: 22rpx;
              }
            }

            .num {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              line-height: 33rpx;
              color: #999999;
              opacity: 1;
            }
          }
        }
      }
    }

    .info-box {
      width: 654rpx;
      margin: 0 auto;
      overflow: hidden;

      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 32rpx;

        .item-left-ipt {
          width: 100%;
        }

        .item-left {
          display: flex;
          align-items: center;

          // 商品总额 优惠券 运费
          .text {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 42rpx;
            color: #333333;
            opacity: 1;
          }

          // 全场满88免运费
          .text2 {
            margin-left: 32rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 42rpx;
            color: #bfbfbf;
            opacity: 1;
          }

          .ipt {
            padding-left: 32rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 42rpx;
            color: #bfbfbf;
            opacity: 1;
            width: 90%;
          }
        }

        .item-right {
          display: flex;
          align-items: center;

          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 42rpx;
          color: #333333;
          opacity: 1;

          .coupon-text {
            margin-right: 16rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 42rpx;
            color: #bfbfbf;
            opacity: 1;
          }

          .coupon-money {
            background: url($IMG_WECHAT_URL+'/activity/choose-coupon-bg.png');
            background-color: #FEDCDC;
            // width: 136rpx;
            height: 38rpx;
            line-height: 38rpx;
            background-size: 136rpx 38rpx;
            background-position: center left;
            background-repeat: no-repeat;
            padding-left: 47rpx;
            border-radius: 8rpx;
            // background-size: 100% 100%;
            text-align: right;
            padding-right: 10rpx;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: $theme;

          }

          .icon {
            display: block;
            width: 12rpx;
            height: 24rpx;
            flex-shrink: 0;
          }
        }
      }
    }

    .info-footer {
      width: 654rpx;
      margin: 45rpx auto 32rpx;
      overflow: hidden;
      display: flex;
      justify-content: flex-end;

      .text1 {
        margin-right: 8rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 42rpx;
        color: #666666;
        opacity: 1;
      }

      .text2 {
        font-size: 32rpx;
        font-family: Oswald;
        font-weight: 500;
        line-height: 36rpx;
        color: $theme;
        opacity: 1;

        .small {
          font-size: 22rpx;
        }
      }
    }
  }

  // 底部总计和按钮
  .footer-box {
    height: 90rpx;
    height: calc(90rpx + constant(safe-area-inset-bottom));
    height: calc(90rpx + env(safe-area-inset-bottom));
    width: 750rpx;
    left: 0;
    position: fixed;
    bottom: 0 !important;
    z-index: 99;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);


    .left {
      display: flex;
      align-items: center;
      margin-left: 32rpx;

      .text1 {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 32rpx;
        color: #1a1a1a;
        opacity: 1;
      }

      .text2 {
        font-size: 32rpx;
        font-family: Oswald;
        font-weight: 500;
        line-height: 36rpx;
        color: $theme;
        opacity: 1;

        .small {
          font-size: 22rpx;
        }
      }
    }

    .right {
      width: 280rpx;
      // height: 90rpx;
      background: $bgtheme;
      opacity: 1;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 90rpx;
      color: #ffffff;
      opacity: 1;
    }
  }

  .freight-popup-content {
    .freight-title {
      padding-left: 32rpx;
      // width: 128px;
      // height: 45px;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .freight-text {
      padding: 16rpx 32rpx 57rpx 32rpx;
      // width: 686px;
      // height: 209px;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
    }

    .freight-btn {
      width: 750rpx;
      height: 100rpx;
      background: $bgtheme;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 100rpx;
      color: #FFFFFF;

    }

    .top-box {
      position: relative;
      padding-top: 40rpx;

      .icon-title {
        width: 32rpx;
        height: 10rpx;
      }

      .title {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-left: 24rpx;
        margin-right: 24rpx;
      }

      .icon-close {
        position: absolute;
        right: 32rpx;
        top: 50rpx;
        height: 28rpx;
        width: 28rpx;
      }
    }
  }

  .coupon-popup-content {
    z-index: 100;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);

    .top-box {
      position: relative;
      padding-top: 40rpx;

      .icon-title {
        width: 32rpx;
        height: 10rpx;
      }

      .title {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-left: 24rpx;
        margin-right: 24rpx;
      }

      .icon-close {
        position: absolute;
        right: 32rpx;
        top: 50rpx;
        height: 28rpx;
        width: 28rpx;
      }
    }

    .coupon-wrap {
      width: 686rpx;
      height: 190rpx;
      background-image: url($IMG_WECHAT_URL+'/activity/coupon-bg.png');
      background-size: 100% 100%;

      .color-white {
        color: #FFFFFF;
      }

      .text-price {
        font-size: 56rpx;

        &:before {
          font-size: 56%;
        }
      }

      .margin-left {
        margin-left: 40rpx;

        .coupon-intro {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: $theme;
        }

        .coupon-title {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
      }

    }

    .bottom-btn {
      width: 750rpx;
      height: 100rpx;
      background: $bgtheme;
      opacity: 1;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #FFFFFF;

    }
  }

  // 积分弹框 start
  .model-notice-box {
    width: 550rpx;

    .header {
      padding: 40rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
    }

    .content {
      margin-top: 20rpx;
      width: 90%;
      margin-left: 5%;

      .height-100 {
        line-height: 40rpx;
      }
    }

    .bottom_content {
      margin: 30rpx 0;
      text-align: center;
      width: 200rpx;
      background: linear-gradient(270deg, rgba(249, 34, 19, 1) 0%, rgba(255, 70, 14, 0.8) 100%);
    }
  }

  // 积分弹框 end
  /deep/ uni-switch.checked-green .uni-switch-input {
    background-color: #39b54a !important;
    border-color: #39b54a !important;
    color: #ffffff !important;
  }
</style>
